import 'package:flutter/material.dart';
import 'package:hockey/extensions/jzx_widget_extension.dart';
import 'package:hockey/jzx_apps.dart';
import 'package:hockey/services/jzx_user.dart';

import 'controller.dart';

class JzxAvatarUnlockConditionView
    extends GetView<JzxAvatarUnlockConditionController> {
  const JzxAvatarUnlockConditionView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: const JzxAAppBar(
        title: 'Strategy',
        // titleWidget: Assets.images.icTitleStrategy.image(height: 23),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
          child: Column(
            children: [
              SizedBox(
                height: kNavigationBarHeight,
              ),
              JzxBlurView(
                backgroundColor: const Color(0x26FFFFFF),
                padding: const EdgeInsets.all(12),
                radius: 12,
                child: Text(
                  'After completing the corresponding task conditions, you can obtain the corresponding avatar frame and level identification.',
                  style: myAppColors.white.font_12,
                  textAlign: TextAlign.justify,
                ),
              ),
              JzxGaps.h22,
              JzxBlurView(
                  backgroundColor: const Color(0x26FFFFFF),
                  padding: const EdgeInsets.all(12),
                  radius: 12,
                  child: Column(
                    children: [
                      Row(
                        // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          // JzxGaps.w24,
                          Text(
                            'Avatar Frame',
                            style: myAppColors.white.font_14.medium.copyWith(
                              decoration: TextDecoration.underline,
                            ),
                          ),
                          SizedBox(width: 59.w),
                          Text(
                            'Unlock conditions',
                            style: myAppColors.white.font_14.medium.copyWith(
                              decoration: TextDecoration.underline,
                            ),
                          ),
                        ],
                      ).paddingOnly(left: 12, right: 20),
                      // _JzxRow(
                      //   child1: Text(
                      //     'Avatar Frame',
                      //     style: myAppColors.white.font_14.medium,
                      //   ),
                      //   child2: const SizedBox.shrink(),
                      //   child3: Text(
                      //     'Unlock conditions',
                      //     style: myAppColors.white.font_14.medium,
                      //   ),
                      // ),
                      JzxGaps.h40,
                      ...JzxUserService.to.frameList.map((item) {
                        final e = item.value;
                        return _JzxRow(
                          onTap: () {
                            controller.showUnlockConditions(item);
                          },
                          child1: Column(
                            children: [
                              e.baseFrame.image(width: 37.w),
                              JzxGaps.h18,
                              e.levelIcon.image(width: 56.w),
                            ],
                          ),
                          child2:
                              Assets.images.icConditionArrow.image(width: 48.w),
                          child3: Text(
                            e.condition,
                            style: myAppColors.white.withOpacity(0.75).font_12,
                          ),
                        );
                      }).toList(),
                    ],
                  ))
            ],
          ),
        ),
      ).backgroud(Assets.images.normalBgv),
    );
  }
}

class _JzxRow extends StatelessWidget {
  const _JzxRow({
    required this.child1,
    required this.child2,
    required this.child3,
    this.onTap,
  });

  final Widget child1;
  final Widget child2;
  final Widget child3;

  final void Function()? onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Row(
        children: [
          Expanded(flex: 80, child: child1),
          SizedBox(width: 8.w),
          Expanded(flex: 48, child: child2),
          SizedBox(width: 16.w),
          Expanded(flex: 150, child: child3)
        ],
      ).paddingOnly(bottom: 22.w, left: 8.w, right: 8.w),
    );
  }
}
